<template>
  <div class="container">
    <div class="box">
      <el-card :body-style="{ padding: '0px' }">
        <div style="width: 320px; height: 30px">
          <el-icon
            size="30"
            color="rgb(115.2, 117.6, 122.4)"
            style="cursor: pointer"
            @click="$router.push('/')"
            ><Back
          /></el-icon>
        </div>
        <div class="top">
          <img
            :src="imgUrl"
            alt=""
            style="width: 150px; height: 150px; border-radius: 50%"
          />
        </div>
        <div class="content">
          <el-form
            :model="passwordData"
            :rules="passwordRules"
            :hide-required-asterisk="true"
          >
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input
                :type="oldFlag ? 'text' : 'password'"
                v-model="passwordData.oldPassword"
                placeholder="请输入旧密码"
                style="width: 200px"
              >
                <template #suffix>
                  <el-icon
                    v-show="!oldShow"
                    style="cursor: pointer"
                    size="18px"
                    @click="
                      oldShow = !oldShow;
                      oldFlag = !oldFlag;
                    "
                    ><View
                  /></el-icon>
                  <el-icon
                    v-show="oldShow"
                    style="cursor: pointer"
                    size="18px"
                    @click="
                      oldShow = !oldShow;
                      oldFlag = !oldFlag;
                    "
                    ><Hide
                  /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                :type="newFlag ? 'text' : 'password'"
                v-model="passwordData.newPassword"
                placeholder="请输入新密码"
                style="width: 200px"
              >
                <template #suffix>
                  <el-icon
                    v-show="!newShow"
                    style="cursor: pointer"
                    size="18px"
                    @click="
                      newShow = !newShow;
                      newFlag = !newFlag;
                    "
                    ><View
                  /></el-icon>
                  <el-icon
                    v-show="newShow"
                    style="cursor: pointer"
                    size="18px"
                    @click="
                      newShow = !newShow;
                      newFlag = !newFlag;
                    "
                    ><Hide
                  /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <el-button
                type="primary"
                style="width: 150px; margin: 0 auto"
                @click="submit"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { changePassword } from "@/api/changePassword";
import { getAvatar } from "@/api/header";
import router from "@/router";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
const user = JSON.parse(localStorage.getItem("user"));
const imgUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const getAvatarUrl = async () => {
  const res = await getAvatar(user.id);
  if (res.code == 200) {
    imgUrl.value = res.data.avatar;
    // console.log(res)
  }
  // user.url = res.data.url
};
getAvatarUrl();
const passwordData = ref({
  oldPassword: "",
  newPassword: "",
  userId: 0,
});
// const oldPassword = ref('')
// const newPassword = ref('')
const oldShow = ref(false);
const newShow = ref(false);
const oldFlag = ref(false);
const newFlag = ref(false);

// const passwordValidator = (rule, value, callback) => {
//   if (value !== passwordData.value.oldPassword) {
//     callback(new Error('两次输入密码不一致!'))
//   } else {
//     callback()
//   }
// }
const passwordRules = reactive({
  oldPassword: [
    { required: true, message: "请输入旧密码", trigger: "blur" },
    { min: 4, max: 12, message: "长度在 4 到 12 个字符", trigger: "blur" },
    {
      patten: /^\w{4,12}$/,
      message: "密码只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 4, max: 12, message: "长度在 4 到 12 个字符", trigger: "blur" },
    //   {required:true,validator:passwordValidator,trigger:'blur'},
    {
      patten: /^\w{4,12}$/,
      message: "密码只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
});

const submit = async () => {
  passwordData.value.userId = user.id;
  const res = await changePassword(passwordData.value);
  console.log(res);
  if (res.code == 200) {
    // alert('修改密码成功')
    ElMessage({
      message: "修改密码成功",
      type: "success",
    });
    localStorage.removeItem("user");
    router.push("/");
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    });
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  /* background-color: blueviolet; */
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 320px;
  height: 360px;
}
.box .el-card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.top {
  /* width: 150px;
    height: 150px; */
  /* border-radius: 50%; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  /* margin-top: 50px; */
}
.content {
  /* width: 200px;
    height: 300px; */
  display: flex;
  justify-content: center;
  margin-top: 20px;
  /* align-self: start; */
  align-items: center;
}
</style>